import React from 'react'
import { ThemeProvider,createTheme,useTheme } from '@mui/material'
import {useSetState} from 'ahooks'
import lodash from 'lodash'
import themeConfig from './theme'
const RootContext = React.createContext()
const {Provider} = RootContext
export const useRoot = ()=>{
  const value = React.useContext(RootContext)
  return value
}
const RootProvider = ({children})=>{
    const [state,setState] = useSetState({
      theme:lodash.cloneDeep(themeConfig),
      layout:'normal'
    })
    const {theme,...rest} = state
    const setTheme = (newTheme)=>{
      const mergeTheme = lodash.mergeWith(theme,newTheme)
      const finalTheme = createTheme(mergeTheme)
      setState({
        theme:finalTheme
      })
    }
    const setLayout = (layout)=>{
      setState({
        layout
      })
    }
    return <Provider value={{...rest,setTheme,setLayout}}>
      <ThemeProvider theme={theme}>
        {children}
      </ThemeProvider>
    </Provider>
}
export default RootProvider
